<template>
  <div class="search">
    <!-- 顶部导航栏 -->
    <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch">
      <template #left>
        <van-icon
          @click="$router.back()"
          name="arrow-left"
          :style="{marginRight:'10px'}"
          size="18"
        />
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 历史记录 -->
    <div class="historyList" v-if="historyList.length>0">
      <div class="historyTitle">历史记录</div>
      <!-- item-项 -->
      <div class="hisotryAll">
        <div
          class="history-list"
          @click="historyShow(item.name)"
          v-for="(item,index) in historyList"
          :key="index"
        >
          {{item.name}}
          <van-badge v-show="item.active">
            <div class="child" />
            <template #content>
              <van-icon @click="removeHistory(item)" name="cross" class="badge-icon" />
            </template>
          </van-badge>
        </div>
      </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
      <div class="recommendTitle">推荐列表</div>
      <div class="recommendAll">
        <div class="recommend-list" v-for="(v,i) in recommendList" :key="v.id">
          <span>{{i+1}}.</span>
          {{v.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RecommendList } from '@/api/api.js'
export default {
  name: 'YscShopSearch',

  data () {
    return {
      // 搜索内容
      searchValue: '',
      // 推荐列表
      recommendList: [],
      // 历史记录
      historyList: [
        {
          name: 'dadadadad',
          active: false
        },
        {
          name: 'dadadadadadad',
          active: false
        }, {
          name: 'dada111dadad',
          active: false
        }, {
          name: 'dad23adadad',
          active: false
        }
      ]
    };
  },
  created () {
    // 获取推荐列表
    this.getRecommendList()
  },
  mounted () {

  },

  methods: {
    // 兄弟传参 关闭页面
    onClickLeft () {
      // this.$bus.$emit('SearchShow', false)
    },
    // 获取推荐列表
    async getRecommendList () {
      const { data: res } = await RecommendList()
      if (res.code !== 200) return this.$toast.fail('获取推荐列表失败')
      this.recommendList = res.data

    },
    // 搜索事件
    onSearch (e) {
    },
    // 点击删除历史记录
    removeHistory (item) {
      console.log(item);
      const v = this.historyList.findIndex(v => v == item)
      // 删除对应的历史记录
      this.historyList.splice(v, 1)
      // 删除玩隐藏全部
      this.historyList.forEach(v => {
        v.active = false
        console.log(v.active);
      })
    },
    // 显示历史记录对应 show
    historyShow (item) {
      const v = this.historyList.findIndex(v => v.name == item)
      if (this.historyList[v].active) return this.historyList[v].active = false;
      this.historyList[v].active = true;
    }
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 2;
  // 历史记录
  .historyList {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    .historyTitle {
      width: 100%;
      line-height: 30px;
      font-size: 12px;
    }
    .hisotryAll {
      display: flex;
      flex-wrap: wrap;
      .history-list {
        margin: 0px 2.5px 7px;
        padding: 0px 5px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: gray;
        border: 1px solid #f96c2f;
        border-radius: 5px;
        background-color: #fff;
      }
    }
  }
  // 推荐列表
  .recommend {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    .recommendTitle {
      width: 100%;
      line-height: 30px;
      font-size: 12px;
    }
    .recommendAll {
      display: flex;
      flex-wrap: wrap;
      .recommend-list {
        flex: 50%;
        line-height: 30px;
        font-size: 12px;
      }
    }
  }
}
.van-badge__wrapper {
  display: initial;
}
.van-badge--fixed {
  left: 0px;
}
.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}
</style>